<template>
  <div>
    <ocean :use="template" class="theme_box"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { OrderAPI } from '@/app/api';
import { useTableTemplate } from '@/ocean';
import { useDialog, useMessage } from 'naive-ui'

const dialog = useDialog()
const message = useMessage()

type Column = {
  bank: "招商银行"
  bankNo: "2398710928889478"
  createTime: "2022-11-05 23:06:53"
  email: "azhangfenqinag@qq.com"
  id: 17
  isDefault: 2
  registerAddress: "上海市静安区都是垃圾"
  registerMobile: "1382939201"
  status: null
  tiNumber: "88823038921"
  titleName: "微软信息有限公司1"
  titleType: 0
  updateTime: "2022-11-05 23:40:17"
  userId: 1
}


const template = useTableTemplate<Column>('发票申请', {
  query: data => OrderAPI.queryInvoice(data).then(({ data, total }) => {
    template.table.setData(data);
    template.pagination.setCount(total);
  })
});

template.form.item('状态', 'status').select({ options: [{ label: '已完成', value: 1 }, { label: '未开票', value: 2 }] });

enum InvoiceType {
  '个人/非企业' = 1,
  '企业',
}

enum Status {
  '已完成' = 1,
  '未开票',
}

template.table.column('开户银行', 'bank');
template.table.column('银行账号号', 'bankNo');
template.table.column('邮箱地址', 'email');
template.table.column('注册地址', 'registerAddress');
template.table.column('注册电话', 'registerMobile');
template.table.column('税号', 'tiNumber');
template.table.column('抬头名称', 'titleName');
template.table.column('发票类型', 'titleType').enums(InvoiceType);
template.table.column('开票状态', 'status').enums(Status);
template.table.column('用户ID', 'userId');
template.table.column('申请时间', 'createTime');

template.table.define({
  title: '操作',
  render: (row) => {
    if (row.status != 1) {
      return (<n-space>
        <n-button type="primary" on-click={() => handleInvoice(row.id)}>处理</n-button>
      </n-space>)
    }
  }
});

const handleInvoice = (id) => {
  OrderAPI.handleInvoice({ invoiceId: id }).then(() => {
    message.success("操作成功");
    template.query();
  })
}

template.query()
</script>